<template>
    <div class="canvas">
        <el-row style="margin-bottom: 10px;">
            <el-color-picker v-model="color" show-alpha :predefine="predefineColors" @change="setStrokeStyle" />
            <el-button @click="setLineWidth(20)">粗线条</el-button>
            <el-button @click="setLineWidth(1)">细线条</el-button>
            <el-button @click="saveImg">保存签名</el-button>
            <el-button @click="useGrab">橡皮擦</el-button>
            <el-button @click="clear">清空画布</el-button>
        </el-row>
        <canvas ref="canvasDom" :class="{ grab: isGrab }"></canvas>
    </div>
</template>

<script setup lang="ts">
import { useCanvas, useColors } from '@/hooks';
console.log(1111111111111)
const { color, predefineColors } = useColors();
const { canvasDom, setLineWidth, useGrab, isGrab, setStrokeStyle, clear, saveImg } = useCanvas('2d');

</script>

<style scoped lang="scss">

.canvas {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        // height: 600px;

        canvas {
            // margin: 5% auto;
            width: 80%;
            height: 80%;
            border: 1px solid #00ced1;
        }
    }
.grab {
    cursor: grab;
}
</style>